<template>
  <view class="page">
      <view class="nav-bg">
        <view class="nav" :style="{top:top + 'px'}">
              <view class="nav-text">抖音</view>
              <view class="nav-text">快手</view>
              <view class="nav-text">视频号</view>
              <view class="nav-text">小红书</view>
        </view>
      </view>
      <view class="data">
        <view class="user">
          <image style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" src=""/>
          <text>添加账号</text>
        </view>
        <view class="data-middle">
          <view class="praise">
            <image style="width: 88rpx;height: 88rpx;" src=""/>
            <text>点赞</text>
          </view>
          <view class="praise">
            <image style="width: 88rpx;height: 88rpx;" src=""/>
            <text>收藏</text>
          </view>
          <view class="praise">
            <image style="width: 88rpx;height: 88rpx;" src=""/>
            <text>评论</text>
          </view>
        </view>
        <view class="data-bottom">
          <view class="data-bottom-item">
            <text>访客数</text>
            <text>0</text>
            <text>昨日0</text>
          </view>
          <view class="data-bottom-item">
            <text>收藏数</text>
            <text>0</text>
            <text>昨日0</text>
          </view>
          <view class="data-bottom-item">
            <text>点赞数</text>
            <text>0</text>
            <text>昨日0</text>
          </view>
          <view class="data-bottom-item">
            <text>评论数</text>
            <text>0</text>
            <text>昨日0</text>
          </view>
        </view>
      </view>
      <view class="recom">
        <view class="recom-top">
          <text>推荐视频</text>
          <image @click="openProfession" style="width: 48rpx;height: 48rpx;" src=""/>
        </view>
        <view class="videos">
          <video @click="goDetails" class="video" src=""></video>
          <video class="video" src=""></video>
          <video class="video" src=""></video>
        </view>
      </view>
  </view>

  <!-- 选择行业 -->
  <uni-popup ref="profession">
    <view class="pro-content">
      <scroll-view class="pro-box">
        <view class="pro-title">选择你的行业</view>
        <view class="pro-item">
          <view class="pro-cate">餐饮业</view>
          <view class="pro-cate-item1">
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
          </view>
        </view>
      </scroll-view>
      <button class="pro-btn">确认</button>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const title = ref<String>('Hello')
const top = ref<Number>(0)
// 获取菜单按钮信息
const res = uni.getMenuButtonBoundingClientRect();
top.value = res.top

// 打开行业选择弹窗
const profession = ref<any>(null)
const openProfession = () => {
  profession.value.open()
}

const goDetails = () => {
  uni.navigateTo({ url: '/pages/create/details' })
}
</script>

<style lang="scss" scoped>
  .page{
    background-color: rgb(246,248,251);
    .nav-bg{
      width: 100%;
      height: 520rpx;
      background: linear-gradient(180deg,rgb(250,222,76)0%,rgb(246,248,251)100%);
      padding: 63rpx 32rpx 0;
      box-sizing: border-box;
      .nav{
        position: absolute;
        width: 488rpx;
        display: flex;
        justify-content: space-between;
        .nav-text{
          font-size: 32rpx;
          color: rgb(48,49,51);
        }
      }
    }
    .data{
      position: absolute;
      top: 216rpx;
      left: 24rpx;
      width: 702rpx;
      height: 502rpx;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 40rpx 32rpx;
      box-sizing: border-box;
      .user{
        display: flex;
        font-size: 32rpx;
        align-items: center;
        color: rgb(48,49,51);
        margin-bottom: 48rpx;
      }
      .data-middle{
        display: flex;
        justify-content: space-between;
        .praise{
          width: 234rpx;
          height: 138rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        }
      }
      .data-bottom{
        display: flex;
        justify-content: space-between;
        .data-bottom-item{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          width: 84rpx;
          height: 148rpx;
          font-size: 28rpx;
          color: rgb(144,147,153);
          margin-top: 40rpx;
        }
      }
    }
    .recom{
      margin-top: 246rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      .recom-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        font-weight: 500;
        color: rgb(48,49,51);
        margin-bottom: 32rpx;
      } 
      .videos{
        .video{
          width: 344rpx;
          height: 612rpx;
          border-radius: 8rpx;
          margin-right: 14rpx;
          &:nth-child(2n){
            margin-right: 0;
          }
        }
      }
    }
  }

  .pro-content{
    .pro-box{
      width: 630rpx;
      height: 1000rpx;
      margin-bottom: 32rpx;
      background-color: #fff;
      border-radius: 8rpx;
      padding: 40rpx 32rpx;
      .pro-title{
        font-size: 36rpx;
        color: rgb(48,49,51);
        text-align: center;
        margin-bottom: 40rpx;
      }
      .pro-item{
        width: 100%;
        height: 226rpx;
        .pro-cate{
          font-size: 28rpx;
          color: rgb(144,147,153);
          margin-bottom: 24rpx;
        }
        .pro-cate-item{
            width: 168rpx;
            height: 64rpx;
            border-radius: 410rpx;
            background-color: rgb(255,205,39);
            font-size: 28rpx;
            color: rgb(48,49,51);
            text-align: center;
            line-height: 64rpx;
            margin: 0 32rpx 32rpx 0;
            &:nth-child(3n){
              margin: 0;
            }
          }
        
      }
    }
    .pro-btn{
      width: 402rpx;
      height: 88rpx;
      background-color: rgb(255,205,39);
      border-radius: 596rpx;
      margin: 0 auto;
      font-size: 32rpx;
      color: rgb(48,49,51);
      text-align: center;
      line-height: 88rpx;
    }
  }
</style>
